<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="light dark" />
    <title>Customized design system • Pico CSS</title>
    <meta name="description" content="An example to customize Pico CSS with SASS." />
    <link rel="stylesheet" href="css/main.css" />
  </head>

  <body>
    <main>
      <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M63.04 39.741c-4.275 17.143-21.638 27.576-38.783 23.301C7.12 58.768-3.313 41.404.962 24.262 5.234 7.117 22.597-3.317 39.737.957c17.144 4.274 27.576 21.64 23.302 38.784Z"
          fill="#F7931A"
        />
        <path
          d="M46.11 27.441c.636-4.258-2.606-6.547-7.039-8.074l1.438-5.768-3.51-.875-1.4 5.616c-.924-.23-1.872-.447-2.814-.662l1.41-5.653-3.509-.875-1.439 5.766c-.764-.174-1.514-.346-2.242-.527l.004-.018-4.842-1.209-.934 3.75s2.605.597 2.55.634c1.422.355 1.68 1.296 1.636 2.042l-1.638 6.571c.098.025.225.061.365.117l-.37-.092-2.297 9.205c-.174.432-.615 1.08-1.609.834.035.051-2.552-.637-2.552-.637l-1.743 4.019 4.57 1.139c.85.213 1.682.436 2.502.646l-1.453 5.834 3.507.875 1.44-5.772c.957.26 1.887.5 2.797.726l-1.434 5.745 3.511.875 1.453-5.823c5.987 1.133 10.49.676 12.384-4.739 1.527-4.36-.076-6.875-3.226-8.515 2.294-.529 4.022-2.038 4.483-5.155ZM38.086 38.69c-1.085 4.36-8.426 2.003-10.806 1.412l1.928-7.729c2.38.594 10.012 1.77 8.878 6.317Zm1.086-11.312c-.99 3.966-7.1 1.951-9.082 1.457l1.748-7.01c1.982.494 8.365 1.416 7.334 5.553Z"
          fill="#fff"
        />
      </svg>
      <form>
        <label for="amount">Amount to Send in Bitcoin</label>
        <input
          id="amount"
          name="amount"
          type="number"
          min="0.001"
          value="0.01"
          step="0.001"
          placeholder="0.01"
          required
        />
        <small data-type="amount"><span data-type="usd" id="amount-usd"></span></small>
        <label for="address">Recipient's Bitcoin Address </label>
        <input
          id="address"
          name="address"
          type="text"
          placeholder="Enter Bitcoin address"
          autocomplete="off"
          required
        />
        <fieldset>
          <label for="priority">Network Priority</label>
          <input
            id="priority"
            name="priority"
            list="priorities"
            type="range"
            min="1"
            max="5"
            step="1"
            value="3"
            list="priority"
          />
          <datalist id="priorities">
            <option value="1">Min</option>
            <option value="2">Low</option>
            <option value="3">Medium</option>
            <option value="4">High</option>
            <option value="5">Max</option>
          </datalist>
        </fieldset>
        <table>
          <tbody>
            <tr>
              <td>Transaction Fees</td>
              <td>
                <div data-type="amount">
                  <span id="transaction-fees-btc" data-type="btc"></span>
                  <span id="transaction-fees-usd" data-type="usd"></span>
                </div>
              </td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td>Total Received</td>
              <td>
                <div data-type="amount">
                  <span id="total-received-btc" data-type="btc"></span>
                  <span id="total-received-usd" data-type="usd"></span>
                </div>
              </td>
            </tr>
          </tfoot>
        </table>
        <button type="submit">Send</button>
      </form>
    </main>
    <footer>
      <small
        >Built with <a href="https://picocss.com">Pico</a> •
        <a href="https://github.com/picocss/examples/tree/master/v2-sass-customized-design-system/"
          >Source code</a
        ></small
      >
    </footer>
    <script src="js/main.js"></script>
  </body>
</html>
